<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中国梦想游首页</title>
<link href="/font/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="/font/css/hzw-city-picker.css">
<link href="/font/css/common.css" rel="stylesheet" type="text/css" />
<link href="/font/css/searchtrain.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="/font/css/hzw-city-picker.css">
<script type="text/javascript" src="/font/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
        var ReleaseNoAddress = '2017_10_11_15_10_25';
    </script>

<script type="text/javascript">
window.onload=function(){
    
        
    //改变方向
    function chg(o,id){
        $('#'+id).click(function(){
            if(o.direct()=='crt'){
                o.direct('lvl');
                $(this).text('纵向');
            }else{
                o.direct('crt');
                $(this).text('横向');
            }
        });
    }
    
    function _auto(o,id){
        $('#'+id).click(function(){
            if(o.isAuto){
                o.isAuto=false;
                $(this).text('自动播放已停止');
            }else{
                o.isAuto=true;
                o.auto();
                $(this).text('自动播放');
            }
        });
    }
}
</script>
<script type="text/javascript"> 
    $(function(){
        var wweya_li =$("div.tab_menu ul li");
        wweya_li.click(function(){
        $(this).addClass("selected")            
         .siblings().removeClass("selected");  
            var index =  wweya_li.index(this); 
        $("div.tab_box > div")  
        .eq(index).show(100)   
            .siblings().hide(); 
                }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");           
        });
    

$("#change").click(function(){
 
    var cun=$("#cityChoice").val();
    $("#cityChoice").val($("#cityChoice1").val());
    $("#cityChoice1").val(cun);
    

})

$(".fangshi ul li").click(function(){

    $(this).addClass("current");
    $(this).siblings().removeClass("current");
    if($(this).text()=="单程"){
        $("#flag").val(0);//单程
       
        $("#wf").hide(); 
    }else{
         $("#flag").val(1);//往返
       
         $("#wf").show();  
    }
})


    
    });
    
    function chufa(){
    	if($("#cityChoice").val()==""){
    		  alert("请选择出发城市")
    		  return false;
    	  }
    	return true;
    }

    function fanhui(){
    	 if($("#cityChoice1").val()==""){
    		  alert("请选择到达城市")
    		  return false;
    	  }
    	 return true;
    }

    function chengshi(){
    	 if($("#cityChoice1").val()==$("#cityChoice").val()){
    		  alert("出发地不能和目的地一样")
    		  return false;
    	  }
    	 return true;
    }

    function chutime(){
    	 if($("#start").text()==""){
    		  alert("请选择出发日期")
    		  return false;
    	  }
    	 return true;
    }

    function huitime(){
    	if($("#end").text()==""){
    		  alert("请选择返回日期")
    		  return false;
    	  }
    	return true;
    }

    function zongtiyanzheng(){
     
    	 // alert($("#start").text())
    	   if($("#flag").val()==0){
    		  if(chufa()&&fanhui()&&chengshi()&&chutime()){
    /* 			  var city1=$("#cityChoice").val()
    			  var city2=$("#cityChoice1").val()
    			  var time1=$("#start").text()
    			  alert(city1+","+city2+","+time1+",")
    			  $.ajax({  
    		        type:"POST",  
    		        url:"/IndexMainServlet",  
    		        data:{  
    		        	"city1":city1,
    		        	"city2":city2,
    		        	"time1":time1,
    		        	"flag":0
    		        },  
    		          
    		        success:function (data) {  
    		        	if(data==1){
    		        		alert("没有信息")
    						return false;
    					} else {					
                         alert("成功")
    						return true;
    					} 
    			        } 
    			    }) */
    			    var time1=$("#start").text()
    			     $("#time1").val(time1)
    			    return true;
    		  }else{
    			  return false;
    		  }
    	   }	  
    	  if($("#flag").val()==1){
    		 
    		  if(chufa()&&fanhui()&&chengshi()&&chutime()&&huitime()){
    			  /* var city1=$("#cityChoice").val()
    			  var city2=$("#cityChoice1").val()
    			  var time1=$("#start").text()
    			  var time2=$("#end").text()
    			  alert(city1+","+city2+","+time2+","+time2)
    			  $.ajax({  
    		        type:"POST",  
    		        url:"/IndexMainServlet",  
    		        data:{  
    		        	"city1":city1,
    		        	"city2":city2,
    		        	"time1":time1,
    		        	"time2":time2,
    		        	"flag":1
    		        },  
    		        dataType:"json",  
    		        success:function (data) {  
    		        	if(data==1){
    						divName.innerHTML="<font color='red'>&nbsp;&nbsp;列车昵称已存在！</font>";
    						return false;
    					} else {					
    						divName.innerHTML="<font color='green'>&nbsp;&nbsp;列车昵称有效</font>";
    						return true;
    					} 
    			        } 
    			    }) */
    			    var time1=$("#start").text()
    				 var time2=$("#end").text()
    				 $("#time1").val(time1)
    				 $("#time2").val(time2)
    			    return true;
    		  }else{
    			  return false;
    		  }
    		  
    	  } 
    	} 
        
    	function tishi(op){
    		if(op==1){
    			alert("没有所查车次,请重新填写查询信息")
    		}
        }
    /* 热门搜索传值 */
 

    
</script>



</head>
<body onload="tishi(${flag })">

	<jsp:include page="/font/top.jsp"></jsp:include>
	<!--搜索框-->


	<div class="base_bd posre">
		<div class="s_box">
			<div class="s_box_tab">

				<a href="###" class="current"
					style="width: 320px; width: 320px; font-family: inherit; font-size: 31px; padding-top: 7px;">梦想游火车票</a>

				<!-- <a href="http://rails.ctrip.com/">国际台湾火车票</a> -->


			</div>
			<div class="search_box">
				<div class="fangshi">
					<ul class="search_type" id="searchtype"
						style="margin-left: 50px; margin-left: 50px; font-size: 19px; font-weight: 800; padding-top: 8px; margin-bottom: -19px;">
						<li class="current dancheng">单程</li>
						<li class="wangfan">往返</li>

					</ul>
				</div>
				<div class="search_form">
					<form action="/IndexMainServlet" mothod="post"
						onsubmit="return zongtiyanzheng()">
						<div class="search_txt">
							<input type="hidden" value="0" name="flag" id="flag"> <input
								type="hidden" value="0" name="time1" id="time1"> <input
								type="hidden" value="0" name="time2" id="time2">
							<!-- <input type="text" id="cityChoice" style="margin: 134px 0 0 557px;"> -->
							<input type="text" id="cityChoice" name="city1"
								readonly="readonly" class="input_txt225" tabindex="1"
								style="margin: 7px 0 0 -1px;">

							<!-- <input type="text" id="notice01" > -->
							<div class="search_city" id="notice01div">
								<span>出发城市</span><i></i>
							</div>
							<a href="#" class="chage" id="change"></a>
						</div>
						<div class="search_txt txt_tab" bus="true">
							<!--  <input type="text" id="notice08" class="input_txt225" value="" tabindex="8"> -->
							<input type="text" id="cityChoice1" readonly="readonly"
								name="city2" class="input_txt225" value="" tabindex="8"
								style="margin: -10px 0 0 -1px;">
							<div class="search_city" id="notice08div">
								<span>到达城市</span><i></i>
							</div>
						</div>


						<!--单程-->
						<div class="search_txt" id="singleDate">
							<div style="display: none;">
								<input id="hello" class="laydate-icon form-control layer-date">
							</div>

							<div class="form-group">
								<ul class="inline">
									<div>
										<font style="font-size: 16px; line-height: 40px;">出发日：</font>
										<li class="inline laydate-icon" id="start"
											style="width: 160px; display: inline-block; line-height: 35px; margin-right: 10px; margin-top: -8px;"></li>
									</div>
									<div id="wf" style="display: none; margin-top: 10px;">
										<font style="font-size: 16px; line-height: 20px;">返回日：</font>
										<li class="inline laydate-icon" id="end"
											style="line-height: 35px; width: 160px; display: inline-block; margin-top: -8px;"></li>
									</div>
								</ul>
							</div>
						</div>
						<!--往返-->

						<input type="submit" value="开始搜索" class="searchbtn" id="searchbtn"
							style="margin-top: -9px;">
					</form>
				</div>

			</div>
		</div>
		<div class="adv_bd" id="divAppBanner"></div>
		<script
			src='http://crm.ws.ctrip.com/Customer-Market-Proxy/AdCallProxyV2.aspx?biztype=401&adlist=[{"pagecode":"1","domid":"divAppBanner","type":"0"}]&fscreen=0&r=ws_www'
			type="text/javascript"></script>
	</div>
	</div>
	<!--seotool-->
	<div class="seotool">
		<div class="base_bd">
			<table width="100%">
				<!--class="seotool"-->
				<tbody>
					<tr>
						<td width="16%"><a href="http://trains.ctrip.com/yupiao/"
							target="_blank"><i class="i_seo icon1"></i>余票查询</a></td>
						<td width="5%"><i class="i_seo l_line"></i></td>
						<td width="16%"><a
							href="http://trains.ctrip.com/daishoudian/" target="_blank"><i
								class="i_seo icon2"></i>代售点查询</a></td>
						<td width="5%"><i class="i_seo l_line"></i></td>
						<td width="16%"><a
							href="http://trains.ctrip.com/TrainSchedule/" target="_blank"><i
								class="i_seo icon3"></i>时刻表查询</a></td>
						<td width="5%"><i class="i_seo l_line"></i></td>
						<td width="16%"><a href="http://trains.ctrip.com/yushouqi/"
							target="_blank"><i class="i_seo icon4"></i>预售期查询</a></td>
						<td width="5%"><i class="i_seo l_line"></i></td>
						<td width="16%"><a
							href="http://livechat.ctrip.com/livechat/TrainChat.aspx?GroupCode=train&version=3.1&origin=1121&orderid=&case=-1&platform=2&qid=&at=3"
							target="_blank"><i class="i_seo icon5"></i>常见问题</a></td>
					</tr>
				</tbody>
			</table>
		</div>

	</div>

	<div class="hottrain">
		<div class="base_bd">
			<div class="titbar">
				<h2>
					坐火车去旅行<span>/热门火车旅游线路</span>
				</h2>
			</div>
			<div class="product_list" id="ul_hotline">
				<div class="product_bd train">
					<a href="#" target="_blank"> <i class="i_recom">推荐</i>
						<div class="product_img">
							<img src="http://pic.c-ctrip.com/railway_v2/zzz_236152_3.jpg"
								alt="">
						</div>
						<div class="product_cont">
							<span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
							<p class="product_tit">京广高铁</p>
							<p class="train_colt current">
								<span class="fr" title="热度">92% <i class="i_colt"></i></span>天南地北任我游

							</p>
						</div>
					</a>
				</div>

				<div class="product_bd train">
					<a href="#" target="_blank">
						<div class="product_img">
							<img src="http://pic.c-ctrip.com/railway_v2/zzz_236152.jpg"
								alt="">
						</div>
						<div class="product_cont">
							<span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
							<p class="product_tit">京沪高铁</p>
							<p class="train_colt current">
								<span class="fr" title="热度">95% <i class="i_colt"></i></span>千里京沪一日还
							</p>
						</div>

					</a>
				</div>

				<div class="product_bd train">
					<a href="#" target="_blank">
						<div class="product_img">
							<img src="http://pic.c-ctrip.com/railway_v2/zzz_236152_2.jpg"
								alt="">
						</div>
						<div class="product_cont">
							<span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
							<p class="product_tit">宁杭甬</p>
							<p class="train_colt current">
								<span class="fr" title="热度">89% <i class="i_colt"></i></span>最养眼的高铁线路
							</p>
						</div>

					</a>
				</div>

				<div class="product_bd train">
					<a href="#" target="_blank">
						<div class="product_img">
							<img src="http://pic.c-ctrip.com/railway_v2/zzz_236152_1.jpg"
								alt="">
						</div>
						<div class="product_cont">
							<span class="base_price" style="display: none"><dfn>&yen;</dfn><strong>1234.5</strong>起</span>
							<p class="product_tit">成渝高铁</p>
							<p class="train_colt current">
								<span class="fr" title="热度">88% <i class="i_colt"></i></span>爱上天府之国
							</p>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
	<!--热门线路-->

	<div class="base_bd">
		<div class="titbar">
			<div id="citytabs" class="citytabs">
				<a href="#" class="">上海</a> <a href="#" class="">北京</a> <a href="#"
					class="">杭州</a> <a href="#" class="">广州</a> <a href="#" class="">南京</a>
				<a href="#" class="">天津</a> <a href="#" class="">武汉</a> <a href="#"
					class="">西安</a>
			</div>
			<h2>
				热门线路<span>/热门路线推荐</span>
			</h2>
		</div>

		<div class="hotline" style="display: inline-block;">
		
			<table width="28%" class="hotline_bd">
				<c:if test="${not empty list}">
					<c:forEach items="${list}" var="l">
						<tr id="trainhotline">
							<td width="24%">
								<p>
									<span class="base_price"><dfn>&yen;</dfn><strong>${l.piaojia}</strong>起</span><a
										href="IndexMainServlet?city1=${l.action}&city2=${l.over}&time1=${time1}&flag=0">${l.action}
										<i class="arr"></i> ${l.over}
									</a>
								</p>

							</td>
						</tr>



					</c:forEach>
				</c:if>

				<!-- <td width="14%"><i class="hotline_dashed"></i></td>
               <td width="24%">
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>236.5</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-zhengzhou/dongche/">上海 <i class="arr"></i> 郑州</a> </p>
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>175.5</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-wenzhou/dongche/">上海 <i class="arr"></i> 温州</a> </p>
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>96.0</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-ningbo/dongche/">上海 <i class="arr"></i> 宁波</a> </p>
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>328.0</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-xiamen/dongche/">上海 <i class="arr"></i> 厦门</a> </p>
               </td>
               <td width="14%"><i class="hotline_dashed"></i></td>
               <td width="24%">
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>261.5</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-fuzhou/dongche/">上海 <i class="arr"></i> 福州</a> </p>
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>237.0</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-nanchang/dongche/">上海 <i class="arr"></i> 南昌</a> </p>
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>89.5</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-yiwu/dongche/">上海 <i class="arr"></i> 义乌</a> </p>
                   <p><span class="base_price"><dfn>&yen;</dfn><strong>22.5</strong>起</span><a href="http://trains.ctrip.com/TrainBooking/shanghai-suzhou/dongche/">上海 <i class="arr"></i> 苏州</a> </p>
               </td> -->
			</table>
		
			<div class="scroll" id="scrollbox" onMouseMove="MoveDiv(event);"
			onMouseOut="MoveOutDiv();" style="float: right;width: 700px ; margin-left:470px; margin-top: -160px;display: inline-block;">
			<div id="scrollcon" style="width: 100%;">
				<table>
					<tbody>
						<tr>
							<td valign="top">
								<table width="100%">
									<tr>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="1" src="/font/gdpic/11.jpg" /></a></td>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="2" src="/font/gdpic/22.jpg" /></a></td>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="3" src="/font/gdpic/33.jpg" /></a></td>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="4" src="/font/gdpic/44.jpg" /></a></td>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="5" src="/font/gdpic/55.jpg" /></a></td>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="6" src="/font/gdpic/66.jpg" /></a></td>
										<td><a href="#" target="_blank"><img height="150"
												width="150" alt="7" src="/font/gdpic/77.jpg" /></a></td>
									</tr>
								</table>
							</td>
							<td><div id="scrollcopy" style="width: 100%;"></div></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		</div>
		<!-- 滚动广告开始 -->
		
	</div>
	<style>
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a, img {
	border: 0;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	border-spacing: 0;
}

.titbox {
	font-size: 18px;
	color: #3366cc;
	height: 32px;
	overflow: hidden;
	width: 880px;
	margin: 20px auto;
}

.scroll {
	width: 880px;
	color: #333333;
	margin: 0 auto;
	overflow: hidden;
}

.scroll img {
	border: solid 1px #ddd;
	margin: 0 5px;
}

.scroll a:hover img {
	border: solid 1px #990000;
}
</style>
	<script>

var dir=1;//每步移动像素，大＝快
var speed=10;//循环周期（毫秒）大＝慢
var MyMar=null;

function Marquee(){//正常移动
	var scrollbox = document.getElementById("scrollbox");
	var scrollcopy = document.getElementById("scrollcopy");
	if(dir>0&&(scrollcopy.offsetWidth-scrollbox.scrollLeft)<=0){
		scrollbox.scrollLeft=0;
	}
	if(dir<0 &&(scrollbox.scrollLeft<=0)){
		scrollbox.scrollLeft=scrollcopy.offsetWidth;
	}
		scrollbox.scrollLeft+=dir;
}

function onmouseoverMy(){
	window.clearInterval(MyMar);
}//暂停移动

function onmouseoutMy() {
	MyMar=setInterval(Marquee,speed);
}//继续移动

function r_left(){
	if(dir==-1)
	dir=1;
}//换向左移

function r_right(){
	if(dir==1)
	dir=-1;
}//换向右移

function IsIE(){
	var browser=navigator.appName
	if((browser=="Netscape")){
		return false;
	}
	else if(browser=="Microsoft Internet Explorer"){
		return true;
	}else{
		return null;
	}
}

var _IsIE = IsIE();
var _MousePX = 0;
var _MousePY = 0;
var _DivLeft = 0;
var _DivRight = 0;
var _AllDivWidth = 0;
var _AllDivHeight = 0;

function MoveDiv(e){

	var obj = document.getElementById("scrollbox");
	_MousePX = _IsIE ? (document.body.scrollLeft + event.clientX) : e.pageX;
	_MousePY = _IsIE ? (document.body.scrollTop + event.clientY) : e.pageY;
	//Opera Browser Can Support ''window.event'' and ''e.pageX''
	
	var obj1 = null;

	if(obj.getBoundingClientRect){
		//IE
		obj1 = document.getElementById("scrollbox").getBoundingClientRect();
		_DivLeft = obj1.left;
		_DivRight = obj1.right;
		_AllDivWidth = _DivRight - _DivLeft;
	}else if(document.getBoxObjectFor){
		//FireFox
		obj1 = document.getBoxObjectFor(obj); 
		var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;
		_DivLeft = parseInt(obj1.x) - parseInt(borderwidth);
		_AllDivWidth = Cut_Px(obj.style.width);
		_DivRight = _DivLeft + _AllDivWidth;
	}else{
		//Other Browser(Opera)
		_DivLeft = obj.offsetLeft;
		_AllDivWidth = Cut_Px(obj.style.width);
		var parent = obj.offsetParent;
		
		if(parent != obj){
			while (parent){  
				_DivLeft += parent.offsetLeft; 
				parent = parent.offsetParent;
			}
		}
		_DivRight = _DivLeft + _AllDivWidth;
	}

	var pos1,pos2;
	pos1 = parseInt(_AllDivWidth * 0.4) + _DivLeft;
	pos2 = parseInt(_AllDivWidth * 0.6) + _DivLeft;

	if(_MousePX > _DivLeft && _MousePX < _DivRight){
		if(_MousePX > _DivLeft && _MousePX < pos1){
			r_left(); //Move left
		}
		else if(_MousePX < _DivRight && _MousePX > pos2){
			r_right(); //Move right
		}
		if(_MousePX > pos1 && _MousePX < pos2){
			onmouseoverMy(); //Stop
			MyMar=null;
		}else if(_MousePX < pos1 || _MousePX > pos2){
			if(MyMar==null){
				MyMar=setInterval(Marquee,speed);
			}
		}
	}
}

function Cut_Px(cswidth){
	cswidth = cswidth.toLowerCase();
	if(cswidth.indexOf("px") != -1){
		cswidth.replace("px","");
		cswidth = parseInt(cswidth);
	}
	return cswidth;
}

function MoveOutDiv(){
	if(MyMar == null){
		MyMar=setInterval(Marquee,speed);
	}
}
</script>

	<script>
 document.getElementById("scrollcopy").innerHTML = document.getElementById("scrollcon").innerHTML;
 MyMar=setInterval(Marquee,speed);
</script>
	<!-- 滚动广告结束 -->






	<div class="footer_w">
		<div class="footer clearfix">
			<div class="footer_c">
				<p>地址：中国河南省郑州市二七区马寨镇 &nbsp;| &nbsp;服务热线：666-8888888 &nbsp; |
					&nbsp;传真：777-6666666 备案号：0453-2xxxxxx</p>
				<p>
					Copyright © 2017 中国梦想旅游发展有限公司 All Rights Reserved. 技术支持：<a href="#">众创项目3组</a>
				</p>
			</div>
			<div class="f_logo">
				<img src="font/images/b_logo.jpg">
			</div>
		</div>
	</div>

	<script type="text/javascript" src="/font/js/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="/font/js/city-data.js"></script>
	<script type="text/javascript" src="/font/js/hzw-city-picker.min.js"></script>
	<script>
    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice',
        valType: 'k-v',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'province',
            id: 'province'
        },
      
    });

    cityPicker.init();
</script>
	<script>
    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice1',
        valType: 'k-v',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'province',
            id: 'province'
        },
      
    });

    cityPicker.init();
</script>
</body>
</html>
<script src="/font/js/plugins/layer/laydate/laydate.js"></script>
<script>
        laydate({elem:"#hello",event:"focus"});var start={elem:"#start",format:"YYYY-MM-DD",min:laydate.now(),max:"2099-06-16 23:59:59",istime:true,istoday:false,choose:function(a){end.min=a;end.start=a}};var end={elem:"#end",format:"YYYY-MM-DD",min:laydate.now(),max:"2099-06-16 23:59:59",istime:true,istoday:false,choose:function(a){start.max=a}};laydate(start);laydate(end);
    </script>
